<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>注册</title>
  <link href="css/css.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header>
    <div class="head_c">
      <!--头部-->
      <div class="top">
        <div class="top_left">欢迎光临悠游行！</div>
        <div class="top_right" style="display: flex;" id="login_signup_area">
          <div class="top_right"><a href="login.html">登录</a><a href="zhuce.html">注册</a></div>
        </div>
        <div class="top_right" style="display: flex;" id="logout_area">
          <a class="top_right" id="login_info" style="font-weight: bold;">用户：15159241643</a>
          <div class="top_right logout_button" onclick="logout()">退出登录</div>
        </div>
      </div>
    </div>
  </header>

  <!--导航-->
  <nav>
    <ul>
      <li><a href="index.html">网站首页</a></li>
      <li><a href="jingdian.html">著名景点</a></li>
      <li><a href="luxian.html">推荐路线</a></li>
      <li><a href="jiudian.html">酒店入住</a></li>
      <li><a href="luntan.html">论坛热帖</a></li>
       
    </ul>
  </nav>

  <!--banner-->
  <div class="banner"></div>
  <div class="login">
    <div class="login_list">
      <div class="login_tittle" style="font-size: 24px; margin: 0;">欢迎注册</div>
      <form>
        <span>手机号</span>
        <input type="text" id="phone" placeholder="请输入手机号" / class="xm" onblur="flush_code()">
        <span>密码</span>
        <input type="password" id="password" placeholder="请输入密码" / class="xm">
        <div id="code_area" style="display: none;">
          <span>验证码</span>
          <input type="text" id="code" placeholder="请输入验证码" / class="xm">
          <img src="" id="code_img" style="width: 100px; height: 40px; margin: -10px 0px 10px 0;" alt="验证码" srcset=""
            onclick="flush_code()">
        </div>
      </form>
      <button class="show-modal" style="margin-top:0px;" onclick="register()">注册</button>
      <div class="modal-wrapper hidden" id="float_area">
        <div class="modal">
          <h2 style="width:100%; text-align:center; line-height:40px;" id="text_float"></h2>
          <button style="margin: 25px auto 0px auto; justify-self: center;" id="text_float_close"
            onclick="float_area_close()">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <footer>悠游行</footer>
</body>

</html>
<script src="./js/utils.js"></script>
<script>
  display_login_info();
  async function flush_code() {
    api = baseUrl1 + "/user/code?phone=";
    api += document.querySelector("#phone").value;
    await fetch(api, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
    }).then(response => response.json())
      .then(data => {
        if (data["msg"] == "手机号格式错误") {
          show_float_text("请输入正确的手机号！");
          document.querySelector("#code_area").style["display"] = "none";
          return;
        }
        document.querySelector("#code_img").src = data["data"]["url"];
        document.querySelector("#code_area").style["display"] = "block";
      })
      .catch(error => {
        console.error(error);
      })
  }

  function float_area_close() {
    document.querySelector("#float_area").style["display"] = "none";
  }

  async function register() {
    phone = document.querySelector("#phone").value;
    password = document.querySelector("#password").value;
    code = document.querySelector("#code").value;
    if (phone == "" || password == "" || code == "") {
      show_float_text("请填写完整信息");
    }
    api = baseUrl1 + "/user/register";
    data = {
      phone: phone,
      password: password,
      code: code
    };
    await fetch(api, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then(response => response.json())
      .then(data => {
        if (data["msg"] == "验证码错误！") {
          show_float_text("验证码错误！");
          return;
        }
        if (data["msg"] == "密码格式有误！") {
          show_float_text("密码格式错误！");
          return;
        }
        show_float_text("注册成功！");
        console.log(data);
      })
      .catch(error => {
        console.error(error);
      })
  }
</script>